<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
<div th:fragment="userInfo">

    <div style="width: 96%;margin: 20px auto;flex-direction:column;justify-content:space-between">
        <div style="height:30px;display:flex;justify-content:space-between">
            <h2><b>基本信息</b></h2>
            <h3>
                <el-link @click="upUser();centerDialogVisible=true"
                         type="primary" icon="el-icon-edit">
                    编辑
                </el-link>
            </h3>
        </div>
        <hr style="border: 0; background-color: #ededed; height: 1px;margin: 20px 0" />
        <div style="height:100%">
            <div>
                <ul class="uul" style="display:flex;flex-direction:column;justify-content:space-between;height:300px">
                    <li style="display: flex;flex-direction:row">
                        <p style="margin-right: 15px">用户昵称</p>
                        <p style="margin-right: 15px" th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.nickname}"></p>
                    </li>
                    <li style="display: flex;flex-direction:row">
                        <p style="margin-right: 15px">用户账号</p>
                        <p th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.username}"></p>
                    </li>
                    <li style="display: flex;flex-direction:row">
                        <p style="margin-right: 15px">用户性别</p>
                        <p th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.sex}"></p>
                    </li>
                    <li style="display: flex;flex-direction:row">
                        <p style="margin-right: 15px">出生日期</p>
                        <p th:text="${#dates.format(session.SPRING_SECURITY_CONTEXT.authentication.principal.birthdate,'yyyy-MM-dd')}"></p>
                    </li>
                    <li style="display: flex;flex-direction:row">
                        <p style="margin-right: 15px">用户电话</p>
                        <p th:text="${session.SPRING_SECURITY_CONTEXT.authentication.principal.phone}"></p>
                    </li>
                </ul>
            </div>
            <el-dialog
                    title="修改用户信息" :visible.sync="centerDialogVisible" width="30%" center>
                <div>
                    <div style="display: flex;justify-content:space-between;width: 100%;margin-bottom:20px">
                        <p style="width:30%;line-height:40px">用户昵称</p>
                        <el-input v-model="user.nickname"></el-input>
                    </div>
                    <div style="display: flex;justify-content:space-between;margin-bottom:20px;width:50%">
                        <p style="width:30%;line-height:40px">用户性别</p>
                        <div style="line-height:40px">
                            <el-radio v-model="user.sex" label="男">男</el-radio>
                            <el-radio v-model="user.sex" label="女">女</el-radio>
                        </div>
                    </div>
                    <div style="display: flex;justify-content:space-between;margin-bottom:20px;width:100%">
                        <p style="width:30%;line-height:40px">用户电话</p>
                        <el-input v-model="user.phone"></el-input>
                    </div>
                    <div style="display: flex;justify-content:space-between;width:65%">
                        <p style="width:30%;line-height:40px"> 出生日期</p>
                        <el-date-picker v-model="user.birthdate" type="date"  placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit();centerDialogVisible = false">修 改</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

</div>
</body>
</html>